import React, { useState } from 'react';
import Button from 'antd/lib/button';
import Layout from 'antd/lib/layout';
import Menu from 'antd/lib/menu';
import Breadcrumb from 'antd/lib/breadcrumb';
import Avatar from 'antd/lib/avatar';
import Dropdown from 'antd/lib/dropdown';
import type { MenuProps } from 'antd/lib/menu';
import { theme } from 'antd/lib';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  ShoppingCartOutlined,
  FormOutlined,
  BarChartOutlined,
  RobotOutlined,
  PlusCircleOutlined,
  HomeOutlined,
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  GlobalOutlined,
  CheckOutlined
} from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import './index.css';

const { Header, Sider, Content, Footer } = Layout;

const Index = () => {
  const { t, i18n } = useTranslation();
  const [collapsed, setCollapsed] = useState(false);
  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
  const navigate = useNavigate();
  const location = useLocation();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
    switch (key) {
      case 'logout':
        // 处理退出登录
        console.log('logout');
        break;
      case 'settings':
        // 处理个人设置
        console.log('settings');
        break;
      default:
        // 其他情况不处理
        break;
    }
  };

  const menuItems = React.useMemo(() => [
    {
      key:'data-visualization',
      icon: <BarChartOutlined />,
      label: '数据可视化',
    },
    {
      key: 'home-visual-data',
      icon: <BarChartOutlined />,
      label: t('menu:homeVisualData'),
    },
    {
      key: 'shopping-list',
      icon: <ShoppingCartOutlined />,
      label: t('menu:shoppingList'),
    },
    {
      key: 'order-form',
      icon: <FormOutlined />,
      label: t('menu:orderForm'),
    },
    {
      key: 'ai-data-analysis',
      icon: <RobotOutlined />,
      label: t('menu:aiDataAnalysis'),
    },
    {
      key: 'add-shopping',
      icon: <PlusCircleOutlined />,
      label: t('menu:addShopping'),
    },
  ],[currentLanguage , t]);

  const userDropdownItems: MenuProps = {
    onClick: handleUserMenuClick,
    items: [
      {
        key: 'settings',
        icon: <SettingOutlined />,
        label: t('common:settings'),
      },
      {
        type: 'divider',
      },
      {
        key: 'logout',
        icon: <LogoutOutlined />,
        label: t('common:logout'),
      },
    ],
  };

  // 获取当前选中的菜单项
  const selectedKey = location.pathname.split('/').pop() || '';
  const currentMenuItem = menuItems.find(item => item.key === selectedKey);

  // 生成面包屑项
  const breadcrumbItems = [
    {
      title: <HomeOutlined />,
      onClick: () => navigate('/index')
    },
    {
      title: currentMenuItem?.label || '首页',
      onClick: currentMenuItem ? () => navigate(currentMenuItem.key) : undefined
    }
  ];

  return (
    <Layout className="layout-container">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className={`logo-container ${collapsed ? 'collapsed' : 'expanded'}`}>
          <img  
            src="/white_on_trans.png" 
            alt="Flora AI Logo"
            className="logo-image"
          />
          {!collapsed && (
            <span className="logo-text">
              Flora AI
            </span>
          )}
        </div>
        <Menu
          key={currentLanguage}
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="header" style={{ background: colorBgContainer }}>
          <div className="header-content">
            <div className="header-left">
              <Button
                type="text"
                className="toggle-button"
                onClick={() => setCollapsed(!collapsed)}
              >
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              </Button>
              <Breadcrumb items={breadcrumbItems} />
            </div>
            <div className="header-right">
              <Dropdown 
                menu={{
                  items: [
                    { key: 'zh', label: '中文', icon: currentLanguage === 'zh' ? <CheckOutlined /> : null },
                    { key: 'en', label: 'English', icon: currentLanguage === 'en' ? <CheckOutlined /> : null },
                    { key: 'ja', label: '日本語', icon: currentLanguage === 'ja' ? <CheckOutlined /> : null },
                    { key: 'ko', label: '한국어', icon: currentLanguage === 'ko' ? <CheckOutlined /> : null },
                  ],
                  onClick: async ({ key }) => {
                    await i18n.changeLanguage(key);
                    setCurrentLanguage(i18n.language);
                  }
                }}
                trigger={['click']}
                placement="bottomRight"
              >
                <Button type="text" icon={<GlobalOutlined />} style={{ color: currentLanguage === 'zh' ? '#1890ff' : 'inherit' }} />
              </Dropdown>
              <Dropdown menu={userDropdownItems} trigger={['click']}>
                <div className="user-info">
                  <Avatar icon={<UserOutlined />} />
                  <span className="username">Admin</span>
                </div>
              </Dropdown>
            </div>
          </div>
        </Header>
        <Content 
          className="content"
          style={{ 
            background: colorBgContainer,
            borderRadius: borderRadiusLG 
          }}
        >
          <Outlet />
        </Content>
        <Footer className="footer">
          FloraAI ©{new Date().getFullYear()} Created by Flora Team
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Index;